<template>
	<view class="page flex-col" >
		<view class="group_1 flex-col">
			<view class="section_1 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<!-- <nav-bar title="财务收入" :color="navBarColor" :bg="navBarBg" /> -->
				<gb-choujiang :nImg='nImg' :AwardList="AwardList" :sjNum="sjNum" @updateMoney="updateMoney">
				</gb-choujiang>
				<view class="image-wrapper_1 flex-row justify-between">

				</view>

			</view>
		</view>
		<!-- <view class="raffle" >
			<text @click="toplist">转盘抽奖</text>
			<text style="color: aqua;" @click="toplists">转盘抽奖</text>
		</view> -->
		
	</view>
</template>
<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				constants: {},
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "幸运抽奖",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				navbarHeigth: null,
				// 背景图，可网络地址，可本地
				nImg: '',
				// 中奖的索引，也就是AwardList数组的索引，sjNum不能等于4，4是立即抽奖
				sjNum: 0,
				// false前端，true前端
				isQd: true,
				// 可自己后端获取，也可以后端  percentage为概率 10代表10%   100代表100%   注意：必须要有一个概率为100%，
				AwardList: [{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a3bf342619e164095c3095cd453b945ac257f19.png',
						name: '神秘大奖',
						percentage: 0,
						index_num: 0
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2a1ebc9cf073cbae9eccbcb5778745d19b951ba8.png',
						name: '谢谢参与11',
						percentage: 0,
						index_num: 1
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2a1ebc9cf073cbae9eccbcb5778745d19b951ba8.png',
						name: '0.1个分红币',
						percentage: 0,
						index_num: 2
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2a1ebc9cf073cbae9eccbcb5778745d19b951ba8.png',
						name: '1.00个分红币',
						percentage: 0,
						index_num: 3
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/28cdc2b1b7cc472702e926eb0b4f11b2c58a532d.png',
						name: '',
						percentage: -1,
						index_num: 4
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2a1ebc9cf073cbae9eccbcb5778745d19b951ba8.png',
						name: '0.50个分红币',
						percentage: 100,
						index_num: 5
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2a1ebc9cf073cbae9eccbcb5778745d19b951ba8.png',
						name: '1.00个分红币',
						percentage: 0,
						index_num: 6
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2a1ebc9cf073cbae9eccbcb5778745d19b951ba8.png',
						name: '5.00个分红币',
						percentage: 0,
						index_num: 7
					},
					{
						image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4672af9b29893558201a3fe62690e604bdc13b98.png',
						name: '大额红包',
						percentage: 0,
						index_num: 8
					}
				]
			};
		},
		onLoad() {
			this.getData()
		},
		methods: {
			toplist() {
				uni.navigateTo({
					url: '../turntable/turntable'
				})
			},
			toplists() {
				uni.navigateTo({
					url: '../turntables/turntables'
				})
			},
			// 中奖后的逻辑
			updateMoney(money) {
				uni.showToast({
					title: '恭喜获得：' + this.AwardList[money].name,
					icon: "none",
					position: 'bottom'
				})
				// 中奖后获取最新状态
				this.getData()
			},
			// 获取本次中奖的
			getData() {
				console.log('99999999')
				// 概率指定，如果是前端控制，如果后端控制下面步骤判断步骤可以省略  直接后端获取sjNum值即可
				if (this.isQd) {
					// ------------------------------这里写获取后端中奖索引
					// 后端赋值
					let add = 2
					this.sjNum = add || 0
				} else {
					// 概率控制  概率100%
					let sj = Math.round(Math.random() * 99 + 1)
					// 前端控制概率
					let arr = []
					console.log("sj: ", sj);

					for (let i = 0; i < this.AwardList.length; i++) {
						if (this.AwardList[i].percentage >= sj) {
							arr.push(this.AwardList[i])
						}
					}
					console.log("arr: ", arr);
					// 随机获得索引
					if (arr.length > 1) {
						this.sjNum = arr[Math.round(Math.random() * arr.length)].index_num
					} else {
						this.sjNum = arr[0].index_num
					}

					console.log(this.sjNum, '6666');
				}
			}

		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		/* overflow: hidden; */
		
		.raffle{
			width: 100%;
			height: 100rpx;
			position: absolute;
			z-index: 99;
			bottom: 0;
			background-color: #ffffff;
		}



		.group_1 {
			height: 1338rpx;
			background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/36419281bd5c088c5a7a0a0e90915d2b2b91f245.png') 0rpx -15rpx no-repeat;
			background-size: 772rpx 845rpx;
			width: 750rpx;

			.section_1 {
				width: 750rpx;
				height: 1338rpx;
				background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/36419281bd5c088c5a7a0a0e90915d2b2b91f245.png') 100% no-repeat;
				background-size: 100% 100%;
				position: fixed;
				z-index: 9;

				.image_1 {
					width: 654rpx;
					height: 22rpx;
					margin: 33rpx 0 0 48rpx;
				}

				.nav-bar_1 {
					width: 743rpx;
					height: 91rpx;
					margin-top: 25rpx;

					.group_2 {
						height: 36rpx;
						width: 185rpx;
						margin: 34rpx 0 0 30rpx;

						.box_1 {
							width: 185rpx;
							height: 36rpx;

							.icon_1 {
								width: 20rpx;
								height: 36rpx;
							}

							.text_1 {
								width: 146rpx;
								height: 35rpx;
								overflow-wrap: break-word;
								color: rgba(255, 255, 255, 1);
								font-size: 36rpx;
								font-family: PingFang-SC-Regular;
								font-weight: NaN;
								text-align: left;
								white-space: nowrap;
								line-height: 34rpx;
								margin-top: 1rpx;
							}
						}
					}

					.applet-top-bar_1 {
						width: 150rpx;
						height: 55rpx;
						margin: 20rpx 24rpx 0 354rpx;
					}
				}

				.image-wrapper_1 {
					width: 717rpx;
					height: 158rpx;
					margin: 281rpx 0 46rpx 17rpx;

					.image_2 {
						width: 357rpx;
						height: 158rpx;
					}

					.image_3 {
						width: 357rpx;
						height: 158rpx;
					}
				}
			}
		}


	}
</style>
